<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>选择框脚本</span>
		<div>选择框脚本是通过select和option 元素创建的，除了通用的一些属性和方法外，
			HTMLSelectElementlent类型还提供了如下属性和方法：
			HTMLSelectelement对象
		</div>
		
		<form id='myform' name="youfrom" >
			<select name="city" >
				<option value="上海v">上海t</option>
				<option value="1v">南京t</option>
				<option value="2v">北京t</option>
				<option>无</option>
			</select>
			
			
			<select name="info" multiple="multiple" size="5">
				<option>无</option>
				
				
			</select>
			
		</from>
	</body>
	
	
	
	
	<script>
	//	<select name="city" multiple="multiple"> 多选
	var fm = document.getElementById('myform');
		window.addEventListener('load',function(){
			var city = fm.elements['city'];
			//alert(city);//[object HTMLSelectElement]
			//city.multiple =true;//支持多选
			//city.size = 5;//显示几行
			//alert(city.options.length);//4 有几个
			//alert(city.options[0]);//  第一个
			//alert(city.type);//select-one  单行  select-multiple多行
		   //alert(city.options[0].value+'--'+city.options[0].text);//上海v--上海t
			//value 和text使用html dom方法，
			
			//使用标准DOM,但是不建议使用
		//	alert(city.options[0].firstChild.nodeValue+'--'+city.options[0].getAttribute('value'));
		   
		 //  alert(city.options[3].value);//ie会打印空，其他显示无
		   
		   //选择事件
		city.addEventListener('change',function(){
			
			alert(this.selectedIndex);//从0开始，得当当前索引
			alert(this.options[this.selectedIndex].text+'--'+this.options[this.selectedIndex].value);
			
			
			
		},false);
		
		//这个定位必须在select对象上
		//city.selectedIndex =2;//定位到某个选项上
		
		//这个定位必须在option对象上
		//city.options[1].selected = true;//定位到某个选项上
		
		//可判断
	/*	if(city.options[2].selected){
			alert('正确选择了北京');
		}else{
			alert('错误');
		}
		*/
		
		//标准dom添加
	/*	var option = document.createElement('option');
	
		var text = document.createTextNode('天津t');
		option.appendChild(text);//添加文本内容
		option.setAttribute('value','天津v')
		city.appendChild(option);//添加标签
		*/
		
		
		//使用option构造函数添加(ie不支持)
	/*	var option = new Option('太原t','太原v');
		city.appendChild(option);*/
		
		//使用add()方法（参数有兼容性）
		//DOM规定add()两个参数必填，如果不确定索引填入null即可，即默认最后
		//但是ie规定第二个参数可选，索引设置null导致出错，为了兼容传递undefined即可
		/*var option = new Option('a太原t','a太原v');
		city.add(option,0);//0表示添加到第一位*/
		
		//兼容方案
		var option = new Option('太原t','太原v');
		city.add(option,undefined);
		
		
		//移除
		
		//自带的
		//city.remove(0);//删除后都会自动顶替序列
		//DOM
		//city.removeChild(city.options[0]);
		//3
		//city.options[0]=null;
		
		
		
		//移动选项
		city.multiple =true;//支持多选
		var info = fm.elements['info'];
		//单击移动
		city.addEventListener('click',function(){
			info.appendChild(this.options[city.selectedIndex]);
			
		},false);
		
		
		//排序
		
		var option1 = city.options[1];//得到南京对象
		//city.insertBefore(option1,city.options[0]);//将南京移动到第0位
		
		city.insertBefore(option1,city.options[option1.index-1]);//向上平移一位
		
		//单选按钮和复选按钮  通过checked ==true循环遍历判断 
		
	},false);
	</script>
	
</html>
